<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="区房屋管理单位：" prop="districtId">
              <CompanySelect v-model="listQuery.districtId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="管理部(分中心)：" prop="houseAdminId">
              <DeptBrowser v-model="listQuery.houseAdminId" :queryDistrictId="listQuery.districtId" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item label="所编号：" prop="stationNumber">
              <el-date-picker
                v-model="listQuery.stationNumber"
                type="date"
                placeholder="年/月/日"
                value-format="yyyy-MM-dd"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item label="巡查时间：" prop="inspectionTime">
              <el-input v-model="listQuery.inspectionTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="处理进度：" prop="processProgress">
              <el-input v-model="listQuery.processProgress" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleAddReport">问题跟踪录入</el-button>
      <el-button type="success" size="mini" @click="handleBatchImport">批量导入</el-button>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>

        <el-table-column align="center" label="区房屋管理单位" prop="task.districtName" width="140">
        </el-table-column>

        <el-table-column align="center" label="管理部(分中心)" prop="task.houseAdminName" width="170">
        </el-table-column>

        <!--   <el-table-column align="center" label="所编号" prop="task.houseAdminName" width="100">
        </el-table-column> -->

        <el-table-column align="center" label="任务编号" prop="task.taskNo" width="180">
        </el-table-column>

        <el-table-column align="center" label="任务名称" prop="task.name" min-width="150">
        </el-table-column>

        <el-table-column align="center" label="问题类型" prop="back.name" min-width="150">
        </el-table-column>

        <el-table-column align="center" label="处理进度" prop="task.processing" width="150">
        </el-table-column>

        <el-table-column align="center" label="巡查时间" prop="back.inspectionTime" width="120">
        </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleViewAttachments(scope.row)">查看附件</el-button>
            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button type="text" size="mini" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small> </el-pagination>
      </div>
    </div>

    <!-- 任务提报弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1000px" @close="handleDialogClose">
      <el-form :model="formData" :rules="formRules" ref="reportForm" label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所号：" prop="stationNumber">
              <el-input v-model="formData.stationNumber" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务类型：" prop="taskType">
              <el-input v-model="formData.taskType" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡查时间：" prop="inspectionTime">
              <el-date-picker v-model="formData.inspectionTime" :disabled="isReadonly" type="date" placeholder="年/月/日"
                value-format="yyyy-MM-dd" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="问题类型：" prop="issueType">
              <el-input v-model="formData.issueType" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题位置：" prop="issueLocation">
              <el-input v-model="formData.issueLocation" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题描述：" prop="issueDescription">
              <el-input v-model="formData.issueDescription" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="来源：" prop="source">
              <el-input v-model="formData.source" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋结构：" prop="houseStructure">
              <el-input v-model="formData.houseStructure" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：" prop="remarks">
              <el-input v-model="formData.remarks" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="文件名称：" prop="attachments">
              <div v-if="isReadonly && formData.attachments && formData.attachments.length > 0">
                <div v-for="(file, index) in formData.attachments" :key="index" class="file-list-item">
                  <el-button type="text" @click="handlePreviewFile(file)">{{ file.name }}</el-button>
                </div>
              </div>
              <el-button v-else type="text" :disabled="isReadonly"
                @click="handleUploadFile('attachments')">点击上传</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 处理方案 -->
        <div class="section-title">处理方案</div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="处理进度：" prop="processProgress">
              <el-select v-model="formData.processProgress" :disabled="isReadonly" placeholder="全部" style="width: 100%">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="未处理" value="未处理"></el-option>
                <el-option label="处理中" value="处理中"></el-option>
                <el-option label="已处理" value="已处理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题处理意见：" prop="processOpinion">
              <el-input v-model="formData.processOpinion" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：" prop="processRemarks">
              <el-input v-model="formData.processRemarks" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="文件名称：" prop="processAttachments">
              <div v-if="isReadonly && formData.processAttachments && formData.processAttachments.length > 0">
                <div v-for="(file, index) in formData.processAttachments" :key="index" class="file-list-item">
                  <el-button type="text" @click="handlePreviewFile(file)">{{ file.name }}</el-button>
                </div>
              </div>
              <el-button v-else type="text" :disabled="isReadonly"
                @click="handleUploadFile('processAttachments')">点击上传</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ isReadonly ? '关 闭' : '取 消' }}</el-button>
        <el-button v-if="!isReadonly" type="primary" @click="handleSubmit" :loading="submitLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 查看附件弹窗 -->
    <el-dialog title="查看附件" :visible.sync="attachmentDialogVisible" width="800px" @close="handleAttachmentDialogClose">
      <div class="attachment-view">
        <div v-for="(file, index) in currentAttachments" :key="index" class="attachment-item">
          <div class="file-icon" :class="getFileIconClass(file.type)">
            <div v-if="file.type === 'pdf'" class="pdf-lines">
              <span></span>
            </div>
            <div v-else-if="file.type === 'word'" class="word-icon">W</div>
            <div v-else-if="file.type === 'excel'" class="excel-icon">E</div>
            <div v-else class="default-icon">文</div>
            <div class="file-text">{{ getFileTypeText(file.type) }}</div>
          </div>
          <div class="file-name">{{ file.name }}</div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="attachmentDialogVisible = false">返回</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入弹窗 -->
    <el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="900px" @close="handleUploadDialogClose">
      <div class="upload-container">
        <el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
          :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-change="handleFileChange"
          :before-upload="beforeUpload" :auto-upload="false" ref="upload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            请将文件拖动到此处，或<em>点击上传</em>
          </div>
        </el-upload>

        <div class="template-download">
          下载模板：<el-button type="text" @click="downloadTemplate">巡查任务提报模板</el-button>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleImport" :loading="importLoading">导 入</el-button>
      </div>
    </el-dialog>

    <!-- 文件上传弹窗 -->
    <el-dialog title="上传文件" :visible.sync="fileUploadDialogVisible" width="600px" @close="handleFileUploadDialogClose">
      <div class="upload-container">
        <el-upload class="upload-dragger" drag :action="uploadAction" :file-list="currentFileList"
          :on-success="handleFileUploadSuccess" :on-error="handleFileUploadError" :on-change="handleFileUploadChange"
          :before-upload="beforeFileUpload" :auto-upload="false" multiple ref="fileUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            请将文件拖动到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fileUploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmFileUpload">确 认</el-button>
      </div>
    </el-dialog>

    <!-- 文件预览弹窗 -->
    <el-dialog title="文件预览" :visible.sync="filePreviewDialogVisible" width="800px"
      @close="handleFilePreviewDialogClose">
      <div class="file-preview-content">
        <div v-if="previewFile && previewFile.type && previewFile.type.includes('image')" class="image-preview">
          <img :src="previewFile.url" alt="预览图片" style="max-width: 100%; max-height: 500px;">
        </div>
        <div v-else class="file-info">
          <div class="file-icon-large" :class="getFileIconClass(previewFile && previewFile.type)">
            <div v-if="previewFile && previewFile.type === 'pdf'" class="pdf-lines">
              <span></span>
            </div>
            <div v-else-if="previewFile && previewFile.type === 'word'" class="word-icon">W</div>
            <div v-else-if="previewFile && previewFile.type === 'excel'" class="excel-icon">E</div>
            <div v-else class="default-icon">文</div>
          </div>
          <div class="file-name-large">{{ previewFile && previewFile.name }}</div>
          <div class="file-size">{{ previewFile && previewFile.size ? (previewFile.size / 1024 / 1024).toFixed(2) + 'MB'
            :
            '' }}</div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="filePreviewDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  deleteTaskCheckBack,
  listTaskCheckBack,
  updateTaskCheckBack
} from '@/api/safe/fangwuanquankancha/xunchawentifankui'
import CompanySelect from "@/components/commonSelect/companySelect.vue"
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue"
export default {
  name: 'XunchaRenwuTibao',
  components: {
    CompanySelect,
    DeptBrowser
  },
  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        districtId: '',
        houseAdminId: ''
      },
      total: 0,
      list: [
      ],
      listLoading: false,
      dialogVisible: false,
      attachmentDialogVisible: false,
      fileUploadDialogVisible: false,
      filePreviewDialogVisible: false,
      uploadDialogVisible: false,
      submitLoading: false,
      importLoading: false,
      dialogTitle: "新增任务提报",
      isReadonly: false,
      currentEditId: null,
      currentAttachments: [],
      currentFileList: [],
      currentUploadField: '',
      previewFile: null,
      uploadAction: "http://125.39.77.18:9021/mall-admin/fileUpload/upload",
      fileList: [],
      formData: {
        stationNumber: "",
        taskType: "",
        inspectionTime: "",
        issueType: "",
        issueLocation: "",
        issueDescription: "",
        source: "",
        houseStructure: "",
        remarks: "",
        attachments: [],
        processProgress: "",
        processOpinion: "",
        processRemarks: "",
        processAttachments: []
      },
      formRules: {
        stationNumber: [
          { required: true, message: '请输入所编号', trigger: 'blur' }
        ],
        taskType: [
          { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        inspectionTime: [
          { required: true, message: '请选择巡查时间', trigger: 'change' }
        ],
        issueType: [
          { required: true, message: '请选择问题类型', trigger: 'change' }
        ],
        issueLocation: [
          { required: true, message: '请输入问题位置', trigger: 'blur' }
        ],
        issueDescription: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请输入来源', trigger: 'blur' }
        ]
      },
      taskCheckId: '',
      taskLedgerId: '',
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    // 分页大小改变
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    // 获取列表数据
    getList() {
      let data = {
        pageSize: this.listQuery.pageSize,
        pageNum: this.listQuery.pageNum,
        districtId: this.listQuery.districtId,
        houseAdminId: this.listQuery.houseAdminId
      }
      listTaskCheckBack(data).then(res => {
        console.log(res)
        this.list = res.data.list
        this.total = res.data.total
      })
    },
    // 搜索
    handleSearch() {
      this.listQuery.page = 1;
      this.getList();
      this.$message.success('查询完成');
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },

    // 新增任务提报
    handleAddReport() {
      this.dialogTitle = "新增任务提报";
      this.isReadonly = false;
      this.currentEditId = null;
      this.dialogVisible = true;
      this.resetFormData();
    },

    // 批量导入
    handleBatchImport() {
      this.uploadDialogVisible = true;
      this.fileList = [];
    },

    // 上传弹窗关闭
    handleUploadDialogClose() {
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },

    // 下载模板
    downloadTemplate() {
      this.$message.success('模板下载中...');
    },

    // 上传前验证
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件！');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
        return false;
      }

      return true;
    },

    // 文件选择变化
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },

    // 上传成功
    handleUploadSuccess(response, file) {
      this.$message.success('文件上传成功');
    },

    // 上传失败
    handleUploadError(err, file) {
      this.$message.error('文件上传失败');
    },

    // 导入数据
    handleImport() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择要导入的文件');
        return;
      }

      this.importLoading = true;
      setTimeout(() => {
        this.importLoading = false;
        this.uploadDialogVisible = false;
        this.$message.success('导入成功！');
        this.getList();
      }, 2000);
    },

    // 弹窗关闭
    handleDialogClose() {
      this.resetFormData();
      this.$refs.reportForm.resetFields();
    },

    // 重置表单数据
    resetFormData() {
      this.formData = {
        stationNumber: "",
        taskType: "",
        inspectionTime: "",
        issueType: "",
        issueLocation: "",
        issueDescription: "",
        source: "",
        houseStructure: "",
        remarks: "",
        attachments: [],
        processProgress: "",
        processOpinion: "",
        processRemarks: "",
        processAttachments: []
      };
    },

    // 表单提交
    handleSubmit() {
      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          let data = {
            file: JSON.stringify(this.formData.attachments),
            inspectionTime: this.formData.inspectionTime,
            name: this.formData.issueType,
            note: this.formData.remarks,
            status: this.formData.processProgress == '未处理' ? 0 : this.formData.processProgress == '处理中' ? 1 : this.formData.processProgress == '已完成' ? 2 : '',
            suggestions: this.formData.processOpinion,
            taskCheckId: this.taskCheckId,
            taskLedgerId: this.taskLedgerId
          }
          data.inspectionTime = data.inspectionTime + ' ' + '00:00:00'
          updateTaskCheckBack(data).then(res => {

            this.getList();
            this.dialogVisible = false;
            this.$message.success('操作成功！');
          })
        } else {
          this.$message.error('请填写完整信息');
          return false;
        }
      });
    },

    // 查看详情
    handleView(row) {
      this.dialogTitle = "查看任务提报详情";
      this.isReadonly = true;
      this.currentEditId = row.id;
      this.fillFormData(row);
      this.dialogVisible = true;
    },

    // 修改记录
    handleUpdate(row) {
      this.dialogTitle = "修改任务提报";
      this.isReadonly = false;
      this.currentEditId = row.id;
      this.fillFormData(row);
      this.dialogVisible = true;
    },

    // 填充表单数据
    fillFormData(row) {
      this.formData = {
        stationNumber: row.task.blockName,
        taskType: row.task.type == 1 ? '严重损坏房屋' : row.task.type == 2 ? '地铁和深基坑施工项目' : row.task.type == 3 ? '汛期巡查房屋' : row.task.type == 4 ? '冬季巡查房屋' : '其他(专项)房屋)',
        inspectionTime: row.back.inspectionTime,
        issueType: row.back.name,
        issueLocation: "",
        issueDescription: "发现安全隐患需要处理",
        source: '日常巡查任务',
        houseStructure: "",
        remarks: row.back.note,
        attachments: JSON.parse(row.back.file) || [
          { name: "提报记录.pdf", type: "pdf", size: 1024000 }
        ],
        processProgress: row.back.status == 0 ? '未处理' : row.back.status == 1 ? '处理中' : row.back.status == 2 ? '已完成' : '',
        processOpinion: row.back.suggestions,
        processRemarks: row.back.note,
        processAttachments: JSON.parse(row.back.file) || [
          { name: "提报记录.pdf", type: "pdf", size: 1024000 }
        ],
      };
      this.taskCheckId = row.back.taskCheckId
      this.taskLedgerId = row.back.taskLedgerId
    },

    // 查看附件
    handleViewAttachments(row) {
      this.currentAttachments = JSON.parse(row.back.file) || [];
      this.attachmentDialogVisible = true;
    },

    // 附件弹窗关闭
    handleAttachmentDialogClose() {
      this.attachmentDialogVisible = false;
      this.currentAttachments = [];
    },

    // 获取文件图标类名
    getFileIconClass(type) {
      const classMap = {
        'pdf': 'file-pdf',
        'word': 'file-word',
        'excel': 'file-excel',
        'image': 'file-image',
        'default': 'file-default'
      };
      return classMap[type] || classMap['default'];
    },

    // 获取文件类型文本
    getFileTypeText(type) {
      const textMap = {
        'pdf': 'PDF',
        'word': 'DOC',
        'excel': 'XLS',
        'image': 'IMG',
        'default': '文件'
      };
      return textMap[type] || textMap['default'];
    },

    // 删除记录
    handleDelete(row) {
      this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTaskCheckBack(row.back.id).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功!');
            this.getList();
          } else {
            this.$message.error(response.message || '删除失败');
          }
        }).catch(error => {
          console.error('删除失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 文件上传相关方法
    handleUploadFile(fieldName) {
      this.currentUploadField = fieldName;
      this.currentFileList = [];
      this.fileUploadDialogVisible = true;
    },

    handleFileUploadDialogClose() {
      this.currentFileList = [];
      this.currentUploadField = '';
      this.$refs.fileUpload.clearFiles();
    },

    beforeFileUpload(file) {
      const isValidType = file.type.includes('image/') ||
        file.type === 'application/pdf' ||
        file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/msword' ||
        file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

      if (!isValidType) {
        this.$message.error('只能上传图片、PDF、Excel、Word文件！');
        return false;
      }

      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!');
        return false;
      }

      return true;
    },

    handleFileUploadChange(file, fileList) {
      this.currentFileList = fileList;
    },

    handleFileUploadSuccess(response, file) {
      this.$message.success(`文件 ${file.name} 上传成功`);
    },

    handleFileUploadError(err, file) {
      this.$message.error(`文件 ${file.name} 上传失败`);
    },

    handleConfirmFileUpload() {
      if (this.currentFileList.length === 0) {
        this.$message.warning('请先选择要上传的文件');
        return;
      }

      const uploadedFiles = this.currentFileList.map(file => {
        let fileType = 'default';
        if (file.raw.type.includes('image/')) {
          fileType = 'image';
        } else if (file.raw.type === 'application/pdf') {
          fileType = 'pdf';
        } else if (file.raw.type.includes('excel') || file.raw.type.includes('spreadsheet')) {
          fileType = 'excel';
        } else if (file.raw.type.includes('word') || file.raw.type.includes('document')) {
          fileType = 'word';
        }

        return {
          name: file.name,
          type: fileType,
          size: file.size,
          url: URL.createObjectURL(file.raw)
        };
      });

      if (this.currentUploadField === 'attachments') {
        this.formData.attachments = [...this.formData.attachments, ...uploadedFiles];
      } else if (this.currentUploadField === 'processAttachments') {
        this.formData.processAttachments = [...this.formData.processAttachments, ...uploadedFiles];
      }

      this.fileUploadDialogVisible = false;
      this.$message.success('文件上传成功！');
    },

    // 文件预览相关方法
    handlePreviewFile(file) {
      this.previewFile = file;
      this.filePreviewDialogVisible = true;
    },

    handleFilePreviewDialogClose() {
      this.previewFile = null;
      this.filePreviewDialogVisible = false;
    }
  }
};
</script>

<style scoped>
/* 页面样式继承公共样式类 publicpageview, publicformview, publitableview */

/* 上传组件标准样式 */
.upload-container {
  padding: 20px 0;
  width: 100%;
}

.upload-dragger {
  width: 100% !important;
}

.upload-dragger .el-upload {
  width: 100% !important;
}

.upload-dragger .el-upload-dragger {
  width: 100% !important;
  height: 200px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background-color: #fafafa;
  box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
  border-color: #409EFF;
  width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #C0C4CC;
  margin: 40px 0 16px;
  line-height: 50px;
  width: 100%;
}

.upload-dragger .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.upload-dragger .el-upload__text em {
  color: #409EFF;
  font-style: normal;
}

.template-download {
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

.template-download .el-button--text {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
}

::v-deep .el-upload {
  width: 100% !important;
}

::v-deep .el-upload-dragger {
  width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
  padding: 20px;
  min-height: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
  justify-items: center;
}

.attachment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 120px;
}

.file-icon {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}

.file-icon:hover {
  transform: scale(1.05);
}

/* 具体文件类型样式 */
.file-pdf {
  background: #EF4A37;
}

.pdf-lines {
  width: 48px;
  height: 36px;
  position: relative;
  margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

.pdf-lines::before {
  top: 8px;
}

.pdf-lines::after {
  top: 16px;
}

.pdf-lines>span {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

.file-word {
  background: #2B579A;
}

.word-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-excel {
  background: #217346;
}

.excel-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-image {
  background: #FF6B35;
}

.file-default {
  background: #909399;
}

.default-icon {
  font-size: 24px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-text {
  color: white;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 100%;
}

/* 表单样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #20B2AA;
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #20B2AA;
}

.file-list-item {
  margin: 5px 0;
}

.file-list-item .el-button--text {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
  padding: 20px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-preview {
  text-align: center;
}

.file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.file-icon-large {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  transition: transform 0.2s;
}

.file-icon-large:hover {
  transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
  background: #EF4A37;
}

.file-icon-large .pdf-lines {
  width: 72px;
  height: 54px;
  position: relative;
  margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
  top: 12px;
}

.file-icon-large .pdf-lines::after {
  top: 24px;
}

.file-icon-large .pdf-lines>span {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large.file-word {
  background: #2B579A;
}

.file-icon-large .word-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-excel {
  background: #217346;
}

.file-icon-large .excel-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-image {
  background: #FF6B35;
}

.file-icon-large.file-default {
  background: #909399;
}

.file-icon-large .default-icon {
  font-size: 36px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large .file-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name-large {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 400px;
}

.file-size {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}
</style>